<template>
	<view class="content">
		<view class="header">
			<view class="icon-btn">
				<view class="icon setting" @tap="toSetting"></view>
			</view>
			<view class="uni-flex uni-row" style="align-items: center;">
				<view class="img-profile">
					<image :src="user.profile" mode=""></image>
				</view>
				<view>
					<view v-if='grade.active_statistics[0].statistics.username'
						style="font-size:20rpx ;font-weight: 0;">
						(推荐官:{{grade.active_statistics[0].statistics.mobile}})
					</view>
					<view class="nikename" @tap="toSetting">
						{{user.user_name}}
						
					</view>
					
					<view style="font-size: 20rpx;" v-if="user.id">
						ID:{{user.id}}
					</view>

					<view class="uni-flex uni-row" v-if="grade.name">
						<view class="usertag login" style="font-size: 20rpx;">
							{{grade.name}}{{user.special===2?'(白名单)':''}}</view>
					</view>
				</view>
				
			<!-- 	<view style="margin-right: 60rpx;margin-left:80rpx;text-align: center;">
					<view v-if="grade.expire_time" style="margin-bottom: 32rpx;  width: 80rpx;font-size:24rpx;background: #00BCD4;color: #fff;padding:0.2rpx 8rpx;border-radius: 5rpx;">
						体验版
					</view>
					<view v-if="grade.expire_time" style="font-size:20rpx;">
						到期时间:{{grade.expire_time}}
					</view>
				</view> -->
			</view>


			<view class="card-item">
				<view class="card-item-content uni-flex uni-row">
					<view v-for="(item,index) in orderList" :key="index" @tap="toOrderList(index)">
						<view class="icon-wrap">
							<image :class="item.class" :src="this.commonImg() + item.icon+'.png'"
								style="width: 90rpx;height: 90rpx;"></image>
						</view>
						<view style="font-size: 25rpx;">{{item.text}}</view>
					</view>
				</view>
			</view>
		</view>

		<view class="infomation" @click="toYue()">
			<view class="fl">
				<view class="title">账户余额：</view>
				<view class="nr"><text>{{user.balance}}</text>元</view>
			</view>
			<view style="font-size: 28rpx;">立即提现 ></view>


		</view>

		<view class="card-item activity">
			<view class="title">我的收益

			</view>

			<view class="card-item-content uni-flex uni-row number-orders">
				<view class="list-item">
					<view class="num">{{direct_count}}<text class="unit">单</text></view>
					<view class="text">直推订单</view>
				</view>
				<view class="list-item">
					<view class="num">{{distribution_count}}<text class="unit">单</text></view>
					<view class="text">团队订单</view>
				</view>
				<view @click="todistributionSy(1)" class="list-item">
					<view class="num">{{income}}<text class="unit">元</text></view>
					<view class="text">订单收益</view>
				</view>
				<view @click="todistributionSy(2)" class="list-item">
					<view class="num">{{grade.active_statistics[0].statistics.income}}<text class="unit">元</text></view>
					<view class="text">升级收益</view>
				</view>
			</view>
		</view>
		<view class="money-banner" @click="todistribution()">
			<view class="changeImg"></view>
			<image :src="this.commonImg() + 'money-banner.png'"></image>
			<image :src='this.commonImg() + "go.png"' class="go"></image>
		</view>


		<view class="card-item activity">
			<view class="title">申请</view>
			<view class=" uni-flex">
				<view v-for="(item,index) in applyList" :key="index" @tap="toActivityList(item.text)"
					class="activity-list">
					<view class="icon-wrap">
						<image :class="item.class" :src="this.commonImg() + item.icon+'.png'"></image>
					</view>
					<view style="font-size: 25rpx;">{{item.text}}</view>
				</view>
			</view>
		</view>


	<view class="money-banner" @click="intention()" style="height:170rpx;">
			<view class="changeImg"></view>
			<image :src="this.commonImg() + 'money-banner-1.png'"></image>
		</view>

		<view class="card-item activity">
			<view class="title">收益项目</view>

			<view class=" uni-flex">
				<view v-for="(item,index) in activityList" :key="index" @tap="toActivityList(item.text)"
					class="activity-list">
					<view class="icon-wrap">
						<image :class="item.class" :src="this.commonImg() + item.icon+'.png'"></image>
					</view>
					<view style="font-size: 25rpx;">{{item.text}}</view>
				</view>
			</view>
		</view>



		<!-- 		<view class="card-item recommend" v-if="user.grade_id!=3">
			<view class="top_title">
				<text></text>
				<text class="btn" @click="tohhrgz()">合伙人规则</text>
			</view>
			<view class="card-item-content uni-flex uni-row">
				<view @click="todistributionYq(2)">
					<text>{{grade.advanced_user_count}}</text>
					<view>高级合伙人</view>
				</view>
				<view @click="todistributionYq(1)">
					<text>{{grade.grade_user_count}}</text>
					<view>中级合伙人</view>
				</view>
				<view @click="todistributionYq(0)">
					<text>{{grade.ordinary_user_count}}</text>
					<view>初级合伙人</view>
				</view>
			</view>
			<view class="submit-btn" @click="toYue2()">
				去升级
			</view>
		</view> -->




		<!-- 		<view class="card-item recommend" v-if="user.grade_id==3">
			<view class="top_title">
				<text></text>
				<text class="btn" @click="tohhrgz()">合伙人规则</text>
			</view>
			<view class="card-item-content uni-flex uni-row">
				<view @click="todistributionYq(2)">
					<text>{{grade.advanced_user_count}}</text>
					<view>高级合伙人</view>
				</view>
				<view @click="todistributionYq(1)">
					<text>{{grade.grade_user_count}}</text>
					<view>中级合伙人</view>
				</view>
				<view @click="todistributionYq(0)">
					<text>{{grade.ordinary_user_count}}</text>
					<view>初级合伙人</view>
				</view>
			</view>
		</view> -->

		<!-- 		<view class="card-item recommend">
			<view class="card-item-content uni-flex uni-row">
				<view @click="todistributionZt()">
					<text>{{direct_count}}</text>
					<view>直推订单</view>
				</view>
				<view v-if="user.grade_id!=1" @click="todistributionZt()">
					<text>{{distribution_count}}</text>
					<view>间推订单</view>
				</view>
				<view @click="todistributionSy()">
					<text>{{income}}</text>
					<view>我的收益(元)</view>
				</view>
			</view>
			<view class="submit-btn" @click="todistribution()">
				去赚钱
			</view>
		</view> -->
		<view class="modal-mask" catchtouchmove="preventTouchMove" v-if="isHhrgz"></view>
		<view class="modal-dialog two" v-if="isHhrgz">
			<view class="modal-content">
				<view class="title">入驻衣之光回收平台规则</view>
				<view>
					注册登录即为环保达人</view>
				<view>共享回收店权益购买699元即可</view>
				<view>共享回收厂权益购买4999元即可</view>
				<button @tap="toclose()">
					确认
				</button>
			</view>
		</view>


		<view class="modal-mask" catchtouchmove="preventTouchMove" v-if="isHhrgz1"></view>
		<view class="modal-dialog two" v-if="isHhrgz1" style="top: 20%;">
			<view class="modal-content">
				<view class="title">入驻衣之光回收入驻权益</view>
				<view>
					一、共享回收方的权益
				</view>
				<view>
					1、环保达人权益:环保达人推荐直接下单完成回收后，可获得每公斤0.2元佣金奖励，没有间推奖励
				</view>
				<view>
					2、共享回收店权益:共享回收店推荐直接下单完成回收后，可获得每公斤0.3元佣金奖励。间接推荐下单完成回收后，可获得每公斤0.1元佣金奖励。并且可以推荐共享回收店和共享回收厂入驻，推荐成功获得最高达50%分佣。
				</view>
				<view>
					3、共享回收厂权益:共享回收厂推荐直接下单完成回收后，可获得每公斤0.4元佣金奖励。间接推荐下单完成回收后，可获得每公斤0.1元佣金奖励。并且可以直接/间接推荐共享回收店和共享回收厂入驻，推荐成功后获得最高达50%分佣。
				</view>
				<button @tap="toclose1()">
					确认
				</button>
			</view>
		</view>


		<view class="service">
			<view class="item" v-for="( item, index ) in serviceList" :key="index" @tap="toPage(item.url)">
				<view class="icon-wrap">
					<!--    <image :src="this.commonImg() + item.icon+'.png'"></image> -->
					<view>{{ item.text }}</view>
				</view>
				<i class="icon xiangyou"></i>
			</view>
		</view>

		<view class="block"></view>
		<custom-tab-bar :selected="2" />
	</view>
</template>
<script>
	import customTabBar from "@/components/customTabBar/index.vue"
	export default {
		components: {
			customTabBar
		},
		data() {
			return {
				isHhrgz: false,
				isHhrgz1: false,
				user: {
					profile: this.commonImg() + "st_pic.png",
					user_name: 'Hi，点击登录账户',
					tags: '普通用户',
					grade_id: 0,
					balance: '--',
					id: ''
				},
				orderList: [{
						icon: 'order-1',
						text: '我的订单',
						class: 'top'
					}, {
						icon: 'order-2',
						text: '待取件',

					},
					{
						icon: 'order-3',
						text: '回收中',

					},
					{
						icon: 'order-4',
						text: '已完成',

					},
				],
				applyList: [{
						icon: 'activity-2',
						text: '入驻权益',
					},
					{
						icon: 'order-1',
						text: '入驻规则',
					},
				],

				activityList: [{
						icon: 'activity-2',
						text: '客户统计',
					},
					
					// {
					// 	icon: 'activity-3',
					// 	text: '佣金明细',
					// },
					
					// {
					// 	icon: 'order-4',
					// 	text: '我的推广',
					// },
					
					{
						icon: 'activity-4',
						text: '旧衣回收',
					},
					{
						icon: 'activity-11',
						text: '家电回收',
					},
					
					

					// {
					// 	icon: 'activity-8',
					// 	text: '旧书回收',
					// },
					// {
					// 	icon: 'activity-9',
					// 	text: '数码回收',
					// },
					// {
					// 	icon: 'activity-10',
					// 	text: '商城',
					// },
				],

				serviceList: [{
						icon: 'list7',
						text: '关于我们',
						url: '/pages/about/about'
					},
					{
						icon: 'list8',
						text: '联系我们',
						url: '/pages/about/custom'
					},
					{
						icon: 'list10',
						text: '意见反馈',
						url: '/pages/user/feedback/feedback'
					},
					{
					    icon: 'list12',
					    text: '入驻登录',
					    url: '/packagePages/tabBar/user/check-in'
					}
				],
				renderImage: false,
				productPage: 0,
				direct_count: 0,
				distribution_count: '-',
				income: 0,
				grade: {},
				loadAll: false,
				member: true,
				token: '',
			}
		},
		onLoad() {

		},
		onShow() {
			this.token = uni.getStorageSync("token");
			if (this.token) {
				this.$api.http.get('user-info', {}).then(res => {
					if (res.code == 1) {
						var userInfo = res.data.member;
						var order_static = res.data.order_static;
						if (userInfo.user_name == "") {
							this.user.user_name = "请设置用户名"
						} else {
							this.user.user_name = userInfo.user_name;
						}
						this.user.id = userInfo.id
						this.user.grade_id = userInfo.grade_id
						this.user.special = userInfo.special
						this.direct_count = order_static.direct_count
						this.distribution_count = order_static.distribution_count
						this.income = order_static.income
						this.grade = res.data.grade
						this.user.balance = userInfo.price
						if (userInfo.head_img) {
							// #ifdef MP
							this.user.profile = userInfo.head_img;
							// #endif
						}

						switch (this.user.grade_id) {
							case 1:
								this.applyList = [{
										icon: 'activity-1',
										text: '入驻衣之光',
									}, {
										icon: 'activity-2',
										text: '入驻权益',
									},
									{
										icon: 'order-1',
										text: '入驻规则',
									},
								]

								break;
							case 2:
								// if(this.grade.expire_time){
								// 	this.applyList = [{
								// 			icon: 'activity-1',
								// 			text: '入驻衣之光',
								// 		}, {
								// 			icon: 'activity-2',
								// 			text: '入驻权益',
								// 		},
								// 		{
								// 			icon: 'order-1',
								// 			text: '入驻规则',
								// 		},
								// 	]
								// }else{
								// 	this.applyList = [{
								// 			icon: 'activity-2',
								// 			text: '入驻权益',
								// 		},
								// 		{
								// 			icon: 'order-1',
								// 			text: '入驻规则',
								// 		},
								// 	]
								// }
								this.applyList = [{
										icon: 'activity-2',
										text: '入驻权益',
									},
									{
										icon: 'order-1',
										text: '入驻规则',
									},
								]
								
								break;
							case 3:
								this.applyList = [{
										icon: 'activity-2',
										text: '入驻权益',
									},
									{
										icon: 'order-1',
										text: '入驻规则',
									},
								]

								this.activityList = [{
										icon: 'activity-2',
										text: '客户统计',
									},
									// {
									// 	icon: 'activity-3',
									// 	text: '区域收益',
									// },
									
									
									// {
									// 	icon: 'activity-3',
									// 	text: '佣金明细',
									// },
									
									// {
									// 	icon: 'order-4',
									// 	text: '我的推广',
									// },
									
									
									
									{
										icon: 'activity-4',
										text: '旧衣回收',
									},
									{
										icon: 'activity-11',
										text: '家电回收',
									},
									
									// {
									// 	icon: 'activity-8',
									// 	text: '旧书回收',
									// },
									// {
									// 	icon: 'activity-9',
									// 	text: '数码回收',
									// },
									// {
									// 	icon: 'activity-10',
									// 	text: '商城',
									// },
								]
								
								this.serviceList=[{
										icon: 'list7',
										text: '关于我们',
										url: '/pages/about/about'
									},
									{
										icon: 'list8',
										text: '联系我们',
										url: '/pages/about/custom'
									},
									{
										icon: 'list10',
										text: '意见反馈',
										url: '/pages/user/feedback/feedback'
									},
									// {
									//     icon: 'list12',
									//     text: '厂级详情',
									//     url: '/packagePages/tabBar/user/plant-level'
									// }
								]
								
								break;
							default:
								break;
						}

					}
				})
			}else{
				this.user={
					profile: this.commonImg() + "st_pic.png",
					user_name: 'Hi，点击登录账户',
					tags: '普通用户',
					grade_id: 0,
					balance: '--',
					id: ''
				}
			}

		},
		methods: {
			toYue() {
				if (this.token) {
					uni.navigateTo({
						url: '/pages/user/distribution/index'
					})
				} else {
					this.toLogin();
				}
			},
			toYue2() {
				if (this.token) {
					uni.navigateTo({
						url: '/pages/user/member/add'
					})
				} else {
					this.toLogin();
				}
			},
			tohhrgz() {
				this.isHhrgz = true
			},
			toclose() {
				this.isHhrgz = false
			},

			tohhrgz1() {
				this.isHhrgz1 = true
			},
			toclose1() {
				this.isHhrgz1 = false
			},

			todistribution() {
				if (this.token) {
					uni.navigateTo({
						url: '/pages/user/distribution2/index'
					})
				} else {
					this.toLogin();
				}
			},
			
			intention(){
				if (this.token) {
					uni.navigateTo({
						url: '/packagePages/tabBar/user/intention'
					})
				} else {
					this.toLogin();
				}
			},

			todistributionYq(state) {
				console.log(state)
				if (this.token) {
					uni.navigateTo({
						url: '/pages/user/user/yq?state=' + state
					})
				} else {
					this.toLogin();
				}
			},
			todistributionZt() {
				if (this.token) {
					uni.navigateTo({
						url: '/pages/user/user/zt'
					})
				} else {
					this.toLogin();
				}
			},
			todistributionSy(type) {
				if (this.token) {
					uni.navigateTo({
						url: '/pages/user/user/sy?type=' + type
					})
				} else {
					this.toLogin();
				}
			},

			qysy(type) {
				if (this.token) {
					uni.navigateTo({
						url: '/pages/user/user/qy?type=' + type
					})
				} else {
					this.toLogin();
				}
			},

			toMsg() {
				uni.navigateTo({
					url: '/pages/user/message/index'
				})
			},
			toLogin() {
				uni.showToast({
					title: '请登录',
					icon: "none"
				});
				// uni.setStorageSync("path", '/pages/tabBar/user/user')
				setTimeout(() => {
					uni.navigateTo({
						url: '../../login/login?path=/pages/tabBar/user/user'
					})
				}, 700)

			},
			toOrderList(index) {
				if (this.token) {
					uni.navigateTo({
						url: '/pages/user/order/index?status=' + index
					})
				} else {
					this.toLogin();
				}
			},

			toActivityList(text) {

				switch (text) {
					case '入驻衣之光':
						this.toYue2()
						break;
					case '入驻权益':
						this.tohhrgz1()
						break;
					case '入驻规则':
						this.tohhrgz()
						break;
					case '客户统计':
						this.todistributionYq(0)
						break;
					case '区域收益':
						this.qysy(0)
						break;
					case '旧衣回收':
						uni.navigateTo({
							url: '/pages/user/order/myOrder?status=' + 0
						})
						break;
					case '家电回收':
						uni.navigateTo({
							url: '/pages/user/order/myOrder2?status=' + 0
						})
						break;
					default:
						uni.showToast({
							title: '敬请期待~',
							icon: "none"
						});
						break;
				}
			},


			toSetting() {
				if (this.token) {
					uni.navigateTo({
						url: '../../user/setting/setting'
					})
				} else {
					this.toLogin();
				}
			},

			toPage(url) {

				if (url == '/pages/user/account/index' || url == '/pages/user/address/index' || url ==
					'/pages/user/feedback/feedback'|| url == '/packagePages/tabBar/user/check-in') {
					if (this.token) {
						uni.navigateTo({
							url: url
						})
					} else {
						this.toLogin();
					}
				} else {
					uni.navigateTo({
						url: url
					})
				}
			}
		},
		onPullDownRefresh() {
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		}

	}
</script>
<style lang="scss">
	page {
		background: #f5f5f5;
	}

	.top_title {
		overflow: hidden;
		line-height: 45rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
		z-index: 9;
		padding-bottom: 30rpx;

		.fl {
			display: flex;
			align-items: center;

			.icon {
				width: 6rpx;
				height: 28rpx;
				background: #222;
				margin-right: 15rpx;
			}

			text {
				font-size: 34rpx;
				color: #222222;
				font-weight: bold;
			}
		}

		.fr {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			color: #999;

			i {
				margin-left: 10rpx;
				font-size: 24rpx;
				color: #999;
				font-weight: bold;
			}
		}
	}

	/* 定义放大缩小动画 */
	@keyframes zoomInOut {

		0%,
		100% {
			transform: scale(1);
		}

		50% {
			transform: scale(1.2);
			/* 放大1.5倍 */
		}
	}

	.card-item {
		// background-color: #fff;
		border-radius: 15upx;
		margin: -80rpx 20rpx 20rpx;
		text-align: center;
		z-index: 1;

		.top_title {
			line-height: 45rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-bottom: 20rpx;

			text {
				font-size: 30rpx;
				color: #333;
				font-weight: bold;
			}

			.btn {
				font-size: 26rpx;
				background: #21A56C;
				color: #fff;
				padding: 6rpx 25rpx;
				border-radius: 30rpx;
				font-weight: normal;
			}
		}

		.icon-wrap {
			position: relative;

			image {
				width: 48rpx;
				height: 48rpx;
				vertical-align: top;
				margin-bottom: 10rpx;
			}

		}

		.card-item-content {
			padding: 30upx 12%;
			justify-content: space-between;
		}
	}

	.list-item {
		margin: 0 5rpx;
	}

	.card-item.recommend {
		padding-bottom: 30rpx;
		margin: 20rpx;

		.card-item-content {
			padding: 30rpx 8%;

			text {
				display: block;
				color: #21A56C;
				font-size: 40rpx;
			}
		}

		.submit-btn {
			width: 75%;
			height: 80rpx;
			border-radius: 80rpx;
			color: #fff;
			background-color: #21A56C;
			font-size: 28rpx;
			line-height: 80rpx;
			text-align: center;
			margin: 0 auto;
		}
	}

	.submit-btn2 {
		width: 30%;
		height: 80rpx;
		border-radius: 10rpx;
		color: #fff;
		background-color: #21A56C;
		// font-size: 28rpx;
		line-height: 80rpx;
		text-align: center;
		// margin: 0 auto;
		float: right;
	}


	/*通用 */

	.uni-flex {
		display: flex;
		flex-direction: row;
	}

	.uni-flex-item {
		flex: 1;
	}

	.uni-row {
		flex-direction: row;
	}

	$item-margin-bottom: 30upx;
	$item-margin-side: 20upx;
	$line-color: #f9f9f9;
	$border-color: #aa833e;

	.header {
		color: #282a30;
		background-color: #ebf9f9;
		background-position: bottom;
		padding: 45rpx 4% 45rpx;
		top: 0;
		width: 92%;
		z-index: 99;
		/*  #ifdef  APP-PLUS  */
		padding-top: 80rpx;

		/*  #endif  */
		.img-profile {
			margin-right: 30upx;
			position: relative;

			image {
				width: 140upx;
				height: 140upx;
				border-radius: 50%;
				vertical-align: middle;
			}

			.member {
				position: absolute;
				bottom: -10rpx;
				right: 0;
				left: 0;
				margin: 0 auto;

				image {
					width: 140rpx;
					border-radius: 0;
				}
			}
		}

		.usertag {
			padding: 0 20upx;
			background-color: #bb965f;
			border-radius: 30upx;
			font-size: 24upx;
			margin-right: 20upx;
			border: 1px solid #bb965f;
			line-height: 1.6;
		}

		.usertag.login {
			background-color: inherit;
			border: 0;
			padding: 0;
		}

		.nikename {
			font-size: 30rpx;
			position: relative;
			font-weight: bold;

			.usertag {
				position: absolute;
				top: 10rpx;
				right: 0;
				line-height: 32rpx;
				padding: 0 15rpx;
			}
		}

		.icon-btn {
			width: 60upx;
			height: 60upx;
			flex-shrink: 0;
			display: flex;
			position: absolute;
			top: 40rpx;
			/*  #ifdef  APP-PLUS  */
			top: 80upx;
			/*  #endif  */
			right: 4%;
			z-index: 999;

			.icon {
				color: #090b0e;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				font-size: 42upx;
				margin-left: 15rpx;
			}
		}
	}



	.infomation {
		background: #fff;
		padding:20rpx;
		border-radius: 15rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: -50rpx 30rpx 36rpx;
		.fl {
			position: relative;
			display: flex;
			align-items: center;
				justify-content: space-around;
			image {
				position: absolute;
				left: 0;
				top: -83rpx;
				width: 140rpx;
				height: 140rpx;
			}

			.title {
				color: #222;
				line-height: 35rpx;
				font-size: 28rpx;
			}

			.nr {
				color: #FB6B50;
				font-size:30rpx;
					line-height: 35rpx;
				font-weight: bold;
			}
		}

		.fr {
			background: #c1fcff;
			color: #666;
			border-radius: 15rpx;
			padding: 15rpx;
			font-size: 24rpx;
		}
	}

	.card-item {
		// background-color: #fff;
		border-radius: 15upx;
		margin: 20upx;
		text-align: center;
		z-index: 1;

		.icon-wrap {
			position: relative;

			image {
				width: 70rpx;
				height: 70rpx;
				vertical-align: top;
				margin-bottom: 10rpx;
			}

		}

		.card-item-content {
			padding: 20upx;
			justify-content: space-between;
		}
	}

	.activity {
		background: #fff;
		margin: 0 30rpx 36rpx;
		padding: 30rpx;

		.uni-flex {
			flex-wrap: wrap;
		}

		.title {
			margin-bottom: 10rpx;
			text-align: left;
		}

		.activity-list {
			flex: 0 0 calc((100% - 180rpx)/3);
			margin: 10rpx;
			background: #fafafb;
			border-radius: 20rpx;
			padding: 20rpx;
		}
	}

	.money-banner {

		height: 200rpx;
		margin: 30rpx;
		position: relative;
		overflow: hidden;
		margin-bottom: 40rpx;

		image {
			width: 100%;
			height: 100%;
			border-radius: 15rpx;
		}

		.go {
			width: 110rpx;
			height: 110rpx;
			position: absolute;
			right: 95rpx;
			top: 27rpx;
			-webkit-animation: zoomInOut 2s infinite;
			animation: zoomInOut 2s infinite;
		}

		.changeImg {
			position: absolute;
			animation: changeImg 2s ease 0s;
			top: 0;
			width: 30%;
			height: 100%;
			content: "";
			background: linear-gradient(to right, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .4) 50%, rgba(255, 255, 255, 0) 100%);
			transform: skewX(-45deg);
			animation-iteration-count: infinite;
		}


	}

	@keyframes changeImg {
		from {
			left: -100%;
		}

		100% {
			left: 150%;
		}
	}

	.number-orders {
		.num {
			color: #424448;
			font-size: 32rpx;
			font-weight: bold;
			line-height: 1.5;

			.unit {
				font-size: 22rpx;
				font-weight: normal;
			}
		}

		.text {
			color: #c3c7ce;
			font-size: 24rpx;
		}
	}

	.service {
		text-align: left;
		padding: 30rpx;
		background: #fff;
		border-radius: 20rpx;
		margin: 40rpx 30rpx 60rpx 30rpx;

		.item {
			width: 100%;
			text-align: center;
			padding-bottom: 20rpx;
			margin-bottom: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #e8eaeb;

			&:last-child {
				border-bottom: none;
				margin-bottom: 0;
				padding-bottom: 0;
			}

			.icon-wrap {
				position: relative;
				display: flex;
				align-items: center;

				image {
					width: 40rpx;
					height: 40rpx;
					margin-right: 15rpx;
				}

				view {
					font-size: 26rpx;
				}

			}

			i {
				font-size: 26rpx;
				color: #b5b8c1;
			}
		}

	}

	.block {
		height: 130rpx;
	}

	/* ---弹窗css--- */
	.modal-mask {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: #000;
		opacity: 0.5;
		overflow: hidden;
		color: #fff;
		z-index: 998;
	}

	.modal-dialog {
		width: 72%;
		position: fixed;
		top: 20%;
		left: 14%;
		background: #fff;
		border-radius: 12rpx;
		z-index: 999;
	}

	.modal-dialog.two {
		top: 30%;
	}

	.modal-content {
		text-align: left;
		line-height: 20rpx;
		padding: 40rpx;
		font-size: 16rpx;

		.code {
			width: 100%;
		}

		.tishi {
			font-size: 28rpx;
			text-align: center;
		}

		.title {
			font-weight: bold;
			font-size: 26rpx;
			text-align: center;
			margin-bottom: 30rpx;
		}

		.show {
			width: 300rpx;
			height: 105rpx;
			display: block;
			margin: 50rpx auto 30rpx;
			z-index: 10000;
		}

		view {
			font-size: 22rpx;
			color: #333333;
			margin-bottom: 10rpx;
			line-height: 1.5;
		}

		view.bold {
			font-weight: bold;
		}

		button {
			width: 85%;
			height: 75rpx;
			line-height: 75rpx;
			border-radius: 60rpx;
			margin: 36rpx auto 0;
			font-size: 28rpx;
			color: #fff;
			background: linear-gradient(135deg, #42d09d, #3bc7b3);
			padding: 0;
		}

		.button {
			display: flex;
			align-items: center;
			justify-content: space-between;

			button {
				margin: 36rpx 0 0;
				width: 48%;
				border: 1px solid #21A56C;
			}

			.close {
				background: #fff;
				color: #21A56C;
			}
		}
	}

	.heignt {
		height: 160rpx;
		width: 100%;
	}

	.save {
		view {
			display: flex;
		}

		position: fixed;
		bottom: 0;
		width: 100%;
		height: 140rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #fff;
		padding: 0 20rpx;
		z-index: 990;
		border-top: 1px solid #eee;
		box-sizing: border-box;

		.btn {
			width: 45%;
			height: 75rpx;
			border-radius: 75rpx;
			background: #fff;
			border: 1px solid #21A56C;
			color: #21A56C;
			justify-content: center;
			align-items: center;
			font-size: 30upx;
		}

		.btn.two {
			background: #21A56C;
			color: #ffffff;
		}
	}
</style>